<template>
  <div>
    <el-form
      ref="deptForm"
      label-width="120px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="form.manager"
          clearable
          style="width:80%"
          placeholder="请选择"
        >
          <!-- label：显示的文字 -->
          <!-- value: 选中当前项对应的值（回传给后端，到底是id，还是name，以后端接口要求为准 -->
          <el-option
            v-for="item in list"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          />
          <!-- <el-option value="1" label="小美丽" />
          <el-option value="2" label="大漂亮" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="form.introduce"
          style="width:80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
        <el-button size="small" @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addDepartment, getDepartmentDetailById, editDepartment } from '@/api/departments.js'
import { getEmployeeSimple } from '@/api/employees'
export default {
  props: {
    id: { type: String, required: true },
    isEdit: { type: Boolean, required: false },
    originList: { type: Array, required: true }
  },
  data() {
    // 校验名字
    const validateName = (rule, value, callback) => {
      let nameList = []
      if (this.isEdit) {
        // 1. 找到当前被编辑的元素的pid
        const pid = this.originList.find(item => item.id === this.id).pid

        // 2. 根据pid找兄弟们（不包括自己）
        nameList = this.originList.filter(item => item.pid === pid && item.id !== this.id).map(item => item.name)
        console.log('编辑', nameList)
      } else {
        // 添加部门，value在同级部门中不重复
        // originList: [{id,code,name,pid}， {id,code,name,pid}.....]
        // 当前的id： this.id
        // 1. 找出所有的已经占用的name
        //
        nameList = this.originList.filter(item => item.pid === this.id).map(item => item.name)
        console.log(nameList)
      }

      // 2. 如果nameList中包含value，校验不通过
      nameList.includes(value) ? callback(new Error(value + '已经占用')) : callback()
    }
    // 定义校验函数
    const validateCode = (rule, value, callback) => {
      // originList: [{id,code,name}， {id,code,name}.....]
      //             [  code1,           code2,      .....]
      // 如果value在this.originList的某个元素中的code相等，说明编码被占用了
      // 1. 找出所有的已经占用code
      let codeList = []
      if (this.isEdit) { // 编辑
        // 排除当前正在编辑的部门编码(原来总共18个，现在就17个： 从18个中过滤出17来)
        const arr = this.originList.filter(item => item.id !== this.id)
        codeList = arr.map(item => item.code) // [cod1,cod2,....]
      } else { // 添加
        codeList = this.originList.map(item => item.code)
      }

      console.log('要校验的部门编号', value, codeList)
      codeList.includes(value) ? callback(new Error(value + ' 已经被占用')) : callback()
      // 2. 看value在code中是否存在
      // if (codeList.includes(value)) {
      //   // 校验不通过  callback(new Error('错误说明'))
      //   callback(new Error(value + ' 已经被占用'))
      // } else {
      //   // 校验通过    callback()
      //   callback()
      // }
    }
    return {
      rules: {
        name: [
          { required: true, message: '部门名字不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名字在1-50字符', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码在1-50字符', trigger: 'blur' },
          { validator: validateCode, trigger: 'blur' }
        ],
        manager: [
          // change:  内容变化
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门介绍在1-300字符', trigger: 'blur' }
        ]
      },
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      list: [] // 保存员工信息
    }
  },
  watch: {
    // 'id': {
    //   handler: function(newVal, oldVal) {
    //     console.log('id变了！ 新值：', newVal, '旧值', oldVal)
    //     // 重发请求获取详情
    //     this.loadDepartmentDetailById()
    //   },
    //   immediate: true
    // }
    // 'id': function(newVal, oldVal) {
    //   if (this.isEdit) {
    //     console.log('id变了！ 新值：', newVal, '旧值', oldVal)
    //     // 重发请求获取详情
    //     this.loadDepartmentDetailById()
    //   }
    // }
  },
  created() {
    this.loadEmployeeSimple()

    // 如果isEdit为true：当前是编辑
    // if (this.isEdit) {
    //   this.loadDepartmentDetailById()
    // }
  },
  methods: {
    async loadDepartmentDetailById() {
      try {
        const res = await getDepartmentDetailById(this.id)
        console.log(' loadDepartmentDetailById', res)

        // 数据回填
        this.form = res.data
      } catch (err) {
        console.log(err)
      }
    },
    async loadEmployeeSimple() {
      try {
        const res = await getEmployeeSimple()
        console.log('loadEmployeeSimple', res)
        this.list = res.data
      } catch (err) {
        console.log(err)
      }
    },
    async doAdd() {
      // 1. 收集参数
      const params = { ...this.form, pid: this.id }
      // console.log('收集参数', params)
      // 2.提交
      try {
        const res = await addDepartment(params)
        console.log('addDepartment', res)

        // 3.子传父：通知父组件：关闭弹层，更新数据
        this.$emit('success')
      } catch (err) {
        console.log(err)
      }
    },

    async doEdit() {
      // 1.提交
      try {
        // console.log('editDepartment', this.form)
        const res = await editDepartment(this.form)
        console.log('editDepartment...', res)

        // 2.子传父：通知父组件：关闭弹层，更新数据
        this.$emit('success')
      } catch (err) {
        console.log(err)
      }
    },
    hSubmit() {
      this.$refs.deptForm.validate(valid => {
        if (valid) {
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
      // 表单校验 -- todo
      // if (this.isEdit) {
      //   // 保存编辑
      //   this.doEdit()
      // } else {
      //   // 做添加
      //   this.doAdd()
      // }
    },
    hCancel() {
      this.$emit('close')
    },
    // 在父组件中 dialog close时，来调用
    resetForm() {
      // resetFields是element-ui中的el-form组件提供一个api，它的作用是：
      // 1. 重置表单数据
      // 2. 清空校验结果(页面上红色的提示)
      this.$refs.deptForm.resetFields()
    }
  }
}
</script>
